// 提现
<template>
  <div class="withdrawal">
    <nav-bar>
      <img slot="left" class="icon_back" @click="backClick" src="../../assets/img/navbar/ic_title_close.png">
      <img slot="right" class="icon_problem" @click="show = !show" src="../../assets/img/navbar/ic_header_question.png">
    </nav-bar>
    <div class="content_box content_fixed">
      <p class="drawal_title">提现余额</p>
      <h4 class="drawal_money">{{amount}}</h4>
      <van-button class="detail_btn" @click="$router.push('/withdrawal_details')">提现明细</van-button>
      <div class="cash_title">提现金额</div>
      <div class="input_box">
        <!-- <input type="number" v-model="value" maxlength="6"> -->
        <van-field v-model="value" type="digit" maxlength="6" class="van_filed"/>
        <span class="icon_rate">¥</span>
        <span class="icon_element">元</span>
        <span class="input_line"></span>
      </div>
      <van-button class="submit" :disabled="!valueActive" :class="valueActive === true ? 'submit_active' : ''" @click="onConfirm">确认提现</van-button>
      <div class="text_amount" v-show="currentPaytype !== null && currentPayaccount !== ''">
        <span class="text_amount_title">余额可提现到</span>
        <span v-if="currentPaytype === '2'">其他</span>
        <span v-else>银行卡</span>
        <span class="text_amount_name" @click="resetClick">{{currentPayaccount}}></span>
      </div>
    </div>
    <div class="botton_box">
      <div class="botton_icon_btn" @click="$router.push('/binding_card')">
        <img src="../../assets/img/withdrawal/ic_btn_add_bind_cash_card.png" alt="">
      </div>
      <div class="icon_text">添加提现方式（支付宝账号/银行卡）</div>
    </div>
    <van-popup v-model="show" round>
      <div class="popup_box">
        <div class="popup_title">提现说明</div>
        <div class="popup_content">
          <p>1.提现申请每天最多只能提交一次（不包括提交失败）。</p>
          <p>2.每个后台有五次100-500的提现机会，五次不足500元的提现之后每次提现最低限额为500元。</p>
          <p>3.提现金额大于或等于2000元则必须使用银行卡提现。</p>
          <p>4.每天24点前的提现会在次日内出款，周五、周六日或节假日将顺延至工作日出款。</p>
          <p>5.请确保银行信息准确无误，支付宝是实名认证过的，未经实名认证的支付宝不予出款，谢谢配合！</p>
        </div>
        <div class="popup_button" @click="show = !show">我知道了</div>
      </div>
    </van-popup>
    <van-popup v-model="paymentShow" position="bottom">
      <div class="payment_content">
        <div class="payment_title">选择提现方式</div>
        <ul class="payment_list">
          <li 
            class="payment_list_item"
            v-for="(item,index) in bankList" 
            :key="index" 
            @click="payClick(index)">
            <div class="payment_list_img">
              <img v-if="item.type === '2'" src="../../assets/img/withdrawal/ic_list_alipay.png" alt="">
              <img v-else src="../../assets/img/withdrawal/ic_list_unionpay.png" alt="">
            </div>
            {{item.bankname}}
            </li>
        </ul>
      </div>
    </van-popup>
    <van-popup v-model="psdShow" round>
      <div class="psd_box">
        <div class="psd_header">提现密码</div>
        <div class="psd_text">请输入提现密码</div>
        <van-field type="password" v-model="password" class="pwd_input"/>
        <div class="btn_box">
          <span class="cancel" @click="psdShow = false">取消</span>
          <span class="cash" @click="cash">确定</span>
        </div>
      </div>
    </van-popup>
    <van-overlay :show="signShow">
      <div class="sign_box" @click="signClose">
        <div class="sign_close">
          <img src="../../assets/img/navbar/ic_title_close.png" alt="">
        </div>
        <van-image
          class="sign_img"
          width="300px"
          src="https://p1.277sy.com/mobapp/common/ghmob/sign_code2.png"></van-image>
        <div class="text1">武汉游趣互娱信息技术有限公司</div>
        <div class="text2">请使用微信扫码完成实名签约，否则无法正常出款</div>
        <van-button 
          class="btn" 
          type="primary" 
          color="#288dff"
          @click="realClose">我已完成实名签约</van-button>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import NavBar from '@/components/common/navbar/NavBar.vue'
import { getCash, getHomePage, getUserBankList } from '../../network/home'
import { mapState } from 'vuex'
  export default {
    components: {
      NavBar,
    },
    data() {
      return {
        show: false,//控制显示隐藏提现说明
        amount: '',
        value: '',//输入框提现金额
        paymentShow: false,
        bankList: [],
        currentPaytype: null,
        currentPayaccount: '',
        ub_id: '',
        psdShow: false,//控制提现密码弹框
        password: '',
        signShow: false,  // 提交实名信息的弹窗
      }
    },
    created () {
      this.getBankList()
      this.getBalance()
    },
    methods: {
      getBankList() {
        getUserBankList().then(res => {
          console.log(res);
          if(res.state === 'ok') {
            this.bankList = res.data
          } else if (res.state === 'err') {
            if(res.msg === 'no_login') {
              this.$router.push('/login')
            }else {
              this.$toast(res.msg)
            }
          }
        })
      },
      getBalance() {
        getHomePage().then(res => {
          console.log(res);
          if(res.state === 'ok') {
            this.amount = res.data.cash_remain
          } else if (res.state === 'err') {
            if(res.msg === 'no_login') {
              this.$router.push('/login')
            }else {
              this.$toast(res.msg)
            }
          }
        })
      },
      cash() {//提现 发起请求
        getCash(this.value,this.ub_id,this.password).then(res => {
          console.log(res)
          this.value = ''
          if (res.state === "ok") {
            this.$toast(res.msg)
            this.getBalance()
          } else if (res.state === 'err') {
            if(res.msg === 'no_login') {
              this.$router.push('/login')
            }else {
              this.$toast(res.msg)
            }
          }
        })
        this.psdShow = false
      },
      backClick() {
        this.$router.back()
      },
      onConfirm() {
        const signCode = localStorage.getItem('signCode_'+ this.userinfo.tgid_9)
        if(!this.bankList) {
          this.$router.push('/binding_card')
        }else {
          if(this.ub_id === '') {
            this.paymentShow = true
          }else {
            if (signCode || this.currentPayaccount == 'paypal') {
              this.psdShow = true
            }else {
              this.signShow = true
            }
          }
        }
      },
      realClose() {
        const signCode = 'signCode_'+ this.userinfo.tgid_9
        localStorage.setItem(signCode, true)
        this.signShow = false
      },
      signClose() {
        this.signShow = false
      },
      payClick(index) {
        this.paymentShow = false
        this.currentPaytype = this.bankList[index].type
        this.currentPayaccount = this.bankList[index].bankname
        this.ub_id = this.bankList[index].id
      },
      resetClick() {
        this.paymentShow = true
      }
    },
    computed: {
      valueActive() {
        return this.value >= 100 ? true : false
      },
      ...mapState([
        'userinfo'
      ])
    },
  }
</script>

<style scoped lang="less">
.withdrawal {
  width: 750px;
}

.icon_back {
  width: 44px;
  height: 44px;
}

.icon_problem {
  width: 44px;
  height: 44px;
}

.botton_box {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 750px;
  height: 250px;
  padding-bottom: env(safe-area-inset-bottom);
}

.botton_icon_btn {
  margin: 0 auto;
  width: 100px;
  height: 100px;
}

.botton_icon_btn img {
  width: 100px;
  height: 100px;
}

.icon_text {
  text-align: center;
  font-size: 24px;
  color: #999;
  line-height: 100px;
}

.popup_box {
  width: 620px;
  box-sizing: border-box;
  font-size: 24px;
  color: #333;
  line-height: 50px;
  background: #fff;
}

.popup_title {
  font-size: 32px;
  font-weight: bold;
  color: #000;
  text-align: center;
  line-height: 120px;
}

.popup_content {
  padding: 0 35px;
}

.popup_button {
  margin-top: 30px;
  font-size: 32px;
  color: #999;
  font-weight: bold;
  width: 100%;
  height: 88px;
  line-height: 88px;
  text-align: center;
  border-top: 1px solid rgb(216, 216, 216);
}

.content_box {
  box-sizing: border-box;
  width: 750px;
  padding: 50px 35px 0;
  text-align: center;
  background: #fff;
}

.drawal_title {
  font-size: 24px;
  color: #999;
}

.drawal_money {
  padding: 30px 0;
  font-size: 66px;
  color: #333;
}

.detail_btn {
  width: 180px;
  height: 75px;
  border-radius: 10px;
  font-size: 24px;
  color: #4152E5;
  border: 1px solid #4152E5;
  font-weight: 500;
  background: #fff;
}

.cash_title {
  text-align: left;
  font-size: 30px;
  color: #333;
  padding: 50px 0 30px 0;
}

.input_box {
  width: 680px;
  height: auto;
  position: relative;
}

.input_line {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 680px;
  height: 1px;
  background: #999;
}

.van_filed {
  border: 0;
  width: 680px;
  height: 88px;
  line-height: 88px;
  font-size: 60px;
  width: 500px;
  padding: 0;
  padding-left: 60px;
}

.icon_element {
  font-size: 30px;
  color: #333;
  position: absolute;
  bottom: 0;
  right: 0;
}

.icon_rate {
  position: absolute;
  font-size: 70px;
  bottom: 0;
  left: 0;
}

.submit {
  width: 680px;
  height: 88px;
  margin-top: 60px;
  outline: none;
  border: 0;
  font-size: 30px;
  font-weight: bold;
  border-radius: 10px;
  color: #fff;
  background-color: #949494;
}

.submit_active {
  background: #344EDF;
}

.text_amount {
  font-size: 24px;
  padding: 40px 0;
  color: #344EDF;
}

.text_amount_title {
  color: #444;
  padding-right: 20px;
}

.text_amount_name {
  text-decoration: underline;
}

.payment_content {
  background: #fff;
  height: 600px;
  padding: 0 40px;
}

.payment_title {
  font-size: 30px;
  color: #222;
  line-height: 92px;
  text-align: center;
  font-weight: bold;
}

.payment_list {
  height: 460px;
  overflow: scroll;
}

.payment_list_item {
  display: flex;
  align-items: center;
  height: 92px;
  line-height: 92px;
  font-size: 24px;
  color: #999;
}

.payment_list_img,
.payment_list_img img {
  display: block;
  width: 36px;
  height: 36px;
  margin-right: 20px;
}

.psd_box {
  width: 600px;
  height: 430px;
  background: #fff;
  position: relative;
}

.psd_header {
  line-height: 120px;
  font-size: 30px;
  color: #222;
  text-align: center;
  font-weight: bold;
}

.psd_text {
  line-height: 40px;
  font-size: 26px;
  color: #222;
  padding-left: 40px;
}

.btn_box {
  position: absolute;
  height: 88px;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
}

.btn_box span {
  flex: 1;
  text-align: center;
  line-height: 88px;
  font-size: 26px;
  border-top: 1px solid #ccc;
}

.cancel {
  color: #666;
}

.cash {
  background: #2f41eb;
  color: #fff;
}

.pwd_input {
  width: 520px;
  height: 80px;
  padding: 0;
  border: 1px solid #ccc;
  margin: 45px 40px 0;
  font-size: 26px;
  padding-left: 20px;
  line-height: 80px;
}

.van-overlay {
  z-index: 10;
}
.sign_box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 540px;
  height: 620px;
  background: #fff;
  border-radius: 30px;
  .sign_img {
    display: block;
    margin: 67px auto 0;
  }
  .text1 {
    padding: 20px 0;
    font-size: 26px;
    font-weight: 400;
    text-align: center;
    color: #222222;
    line-height: 32px;
  }
  .text2 {
    font-size: 22px;
    font-weight: 400;
    text-align: center;
    color: #ff1414;
    line-height: 32px;
  }
  .btn {
    display: block;
    margin: 40px auto 0;
    width: 360px;
    height: 68px;
    border-radius: 34px;
    font-size: 26px;
    font-weight: 700;
  }
  .sign_close {
    margin: 20px 20px 0 0;
    float: right;
    width: 40px;
    height: 40px;
    background: rgba(0,0,0,0.09);
    border-radius: 50%;
    img {
      margin: 10px;
      width: 20px;
      height: 20px;
    }
  }
}

</style>